<script setup lang="ts">
import { thumbStyle } from "_s/common/quasarStyle";
import { LimitsHead, choiceLimits, routerLimits, choiceButtons, defaultRoute } from "./limitsHead";
import { difference } from "lodash";
const { notify } = useQuasar();
import type { RouteMeta } from "vue-router";
const props = defineProps(["info"]);
// const emits = defineEmits(["update"]);

const diaload = defineModel<boolean>();

//#region 数据初始化
// const menus = ref<string[]>([]); // 回显菜单
console.log(props.info);
choiceLimits.value = props.info.menus ? props.info.menus.split(",") : [defaultRoute.meta?.id];
choiceButtons.value = props.info.buttons ? props.info.buttons.split(",") : [];

// #endregion

// #region 选择按钮
const pageId = ref<string>(); // 选择菜单的id
const modelButtons = (value: string[]) => {
  console.log(value);
  const oldButttons = JSON.parse(JSON.stringify(choiceButtons.value));
  const diffButttons = difference(value, oldButttons); // 选择的值
  if (diffButttons.length > 0) {
    const choiceButton = diffButttons[0];
    const arrId = choiceButton?.split("_");
    const pageId = arrId![0] + "_" + arrId![1];
    if (choiceLimits.value.includes(pageId)) {
      choiceButtons.value = value;
      return;
    }
    notify({
      message: "请先选择菜单",
      type: "error"
    });
  } else {
    // 取消选择
    choiceButtons.value = value;
  }
};

const buttons = ref<RouteMeta["limits"]>([]); // 选择的菜单下的按钮
watch(
  () => routerLimits.value,
  val => {
    if (val && val.meta && val.meta.limits) {
      pageId.value = val.meta.id;
      buttons.value = val.meta.limits;
    } else {
      buttons.value = [];
    }
  }
);

// #endregion

//#region 关闭和保存
const submit = () => {
  // emit("submit");
};

const cancel = () => {
  diaload.value = false;
};

//#endregion
</script>
<template>
  <q-card class="container q-pa-lg">
    <q-card-section>
      <div class="text-h6">角色绑定用户</div>
    </q-card-section>
    <q-separator inset />
    <q-card-section>
      <div class="row">
        <div class="menu">
          <q-scroll-area
            style="height: 500px"
            class="q-mt-md"
            :thumb-style="thumbStyle"
          >
            <LimitsHead />
          </q-scroll-area>
        </div>

        <q-separator
          vertical
          inset
        />
        <div class="userTable q-px-md q-mt-sm">
          <div class="q-gutter-sm">
            <template
              v-for="item in buttons"
              :key="item"
            >
              <q-checkbox
                :model-value="choiceButtons"
                @update:model-value="modelButtons"
                :val="pageId + '_' + item"
                :label="$t('pub.' + item)"
              />
            </template>
          </div>
        </div>

        <!-- <q-btn unelevated color="primary" icon="add" :label="$t('pub.add')" @click.prevent="add" /> -->
      </div>
    </q-card-section>
    <div class="text-center q-mt-lg">
      <q-btn
        unelevated
        color="primary"
        class="btn"
        :label="$t('pub.submit')"
        @click.prevent="submit"
      />
      <q-btn
        unelevated
        class="q-ml-sm btn"
        outline
        :label="$t('pub.cancel')"
        @click="cancel"
      />
    </div>
  </q-card>
</template>

<style scoped lang="scss">
.container {
  max-width: 1050px;
  min-height: 250px;
}
.menu {
  width: 350px;
}
.userTable {
  width: 600px;
}
.input {
  width: 220px;
}
.btn {
  width: 100px;
}
.my-menu-link {
  color: white;
  background: #f2c037;
}
</style>
